Docker部署前端vue+node(前端入门篇) | 您所在的位置:网站首页 › docker nodejs vue › Docker部署前端vue+node(前端入门篇) |
ps: 鄙人第一次在掘金写文,还望各大佬口下留情(请忽略排版)。 自我介绍:本人,男,92年,苏州,已婚(哈哈哈),前端入行3年多。好,收~ 没错,我是切图仔,平时爱倒腾倒腾而已。docker前后倒腾了我10天,头发掉了无数,咨询了一些大佬,过程较艰辛,故决定分享下这篇文章,技术较接近运维(修电脑的)的日常。但谁让我们前端处在最底层呢,除了切图就没其他事了,搞它! 前言大多数公司项目部署可能让前端动手的很少,现在很多都是走jenkins自动化部署了。以至于前端也就成为了别人眼中的切图仔。本文将带你打通任督二脉,遨游在docker部署的世界里。(啊呸,醒醒,测试喊你回去改bugssssss)。 简单说下技术,前端vue打包的dist直接扔到服务器(此文应用nginx)里,后端node(此文应用了express)造好接口并且开启服务,nginx配置下接口转发即可。当然也要启一个mysql数据库(我还特意看了一天的mysql,无奈)。简单实现前端输入内容,调接口,存数据库这么一个流程。由于本人较穷,买不起服务器,故用了vmvare+ubuntu耍耍 vmvare:https://www.vmware.com/cn/products/workstation-player/workstation-player-evaluation.html复制代码18.04LTS desktop ubuntu:https://ubuntu.com/#download复制代码整体技术:docker、vue、express+sequelize、mysql 环境介绍Docker 是一个开源的应用容器引擎,可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。(简单点,就比如你去一个商场,商场里有很多专卖店,小吃店,化妆品店,这些店就好比容器,你根据自己的需求去哪个店就好,而且这些店本质上互不干扰对方做生意) vue我就不介绍了,这玩意都写的我想吐了。 node呢,现在是很多中高级前端常备的一个技能了,毕竟没那么多精力学java和世界上最好的语言php了。简单的说就是运行在服务端的 JavaScript,基于V8引擎,速度非常快,性能非常好。前端一般用的比较多的是它的服务端框架express/koa。vue-cli我记得就是用了express启的服务。 Docker首先肯定在ubuntu里安装docker(自行度娘官网) 镜像镜像仓库官网:hub.docker.com/ 镜像是 Docker 运行容器的前提,仓库是存放镜像的场所,可见镜像更是Docker的核心。简单理解Docker 镜像可以看作是一个特殊的文件系统,提供容器运行时所需的程序、库、资源、配置等文件(运行环境)。 方便理解我们来搞下mysql。 docker search mysql :在仓库里搜下mysql镜像 此时看到mysql版本为官方,大可安心下载,然后docker pull mysql:latest来拉取最新版本镜像。当然我这边下载的是5.6版本。docker pull mysql:5.6成功后,docker images来查看所有已装镜像,即可看到mysql:5.6镜像已安装ok 容器是基于镜像运行的一个软件单元。它将代码及其所有依赖关系打包,以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。是一个轻量的独立的可执行的软件包。容器将软件与其环境隔离开来,并确保它可以统一运行。一台机器上可运行多个容器。 以mysql镜像运行一个容器: docker run -itd --name mysql-1 -p 3307:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql:5.6 以5.6版本的mysql运行一个名为mysql-1内部端口3306映射到主机3307且密码为123456的容器 -it:一般同时出现 i:交互式操作 t:终端 --name:命名容器名 -p:容器内部端口映射到主机端口 docker ps -a:查询所有状态的容器(包括停止)复制代码docker ps:查询处于运行状态的容器 此时我们可以用mysql客户端连接看下: 当然先得看下你linux的ip:可以看到此时ip为10.0.0.178(vm网络连接方式采用了桥接)。 此时mysql客户端配置连接测试: ok,说明你已经离成功不远了 Vue也就是我们的前端啦,页面很简单,就造了一个接口。 项目github地址:github.com/qianduanwuz… 然后打包一下npm run build生成dist。前面说到前端资源要放到服务器nginx里。 所以我们这继续开搞: docker search nginx 仓库里为官方最新版本 docker pull nginx:latest 安装 docker images看下nginx镜像是否安装成功 然后我们运行下nginx容器看下浏览器是否能正常访问nginx服务: docker run --name nginx-test -p 8080:80 -d nginx复制代码运行完后看10.0.0.178:8080能访问说明ok 此时我们可以进入这个容器来看一些配置及操作 docker exec -it 容器id bash:进入容器(推荐exec,容器退出,不会导致容器的停止)复制代码docker ps查看下容器nginx-test 此时我们可看见nginx的配置/usr/share/nginx/html/index.html,那我们把前端dist直接放进就ok,但此时我们来用Dockerfile来定制下镜像。 什么是 Dockerfile?Dockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明。 此时可以在vmvare创建Dockerfile文件夹,并且touch一个Dockerfile。命令如下: 然后在/Dockerfile/创建web文件夹,在/Dockerfile/web/创建front文件夹,然后把前端dist拖到/Dockerfile/web/front/。可参照下面看是否文件目录正确 好,我们来开搞Dockerfile,切到/Dockerfile/目录下 vim Dockerfile编辑 FROM:定制的镜像都是基于 FROM 的镜像,这里的 nginx 就是定制需要的基础镜像。后续的操作都是基于 nginx。 COPY:复制指令,从上下文目录中复制文件或者目录到容器里指定路径。 前面我们看过nginx容器里静态文件的目录为/usr/share/nginx/html/,所以故dist复制到此即可。 开始构建镜像docker build -t web-front:latest . //一定注意末尾加上 .复制代码构建完后docker images可看到web-front:latest镜像 运行容器docker run -itd --name web-front-1 -p 2222:80 web-front:latest bash复制代码 docker ps 查看容器web-front-1 /usr/sbin/nginx开启nginx服务 访问10.0.0.178:2222 ok,阔以访问前端服务了,你基本接近成功了。 Node准备造接口啦。express+sequelize(orm) 项目github地址:github.com/qianduanwuz… 贴部分核心代码 连接数据库: 建模: 接口: server.js: 后面node容器node server.js即可启动服务 部署node准备工作 在/Dockerfile/web/下创建node文件夹,然后把node项目文件放到/Dockerfile/web/node/里,当然也需要/Dockerfile/web/node/创建个Dockerfile来做node的定制镜像(暂不使用docker compose)。 编辑Dockerfile docker build -t web-node:beta . //一定注意末尾加上 . beta其实就是web-node的tag 运行容器docker run -itd --name web-node-beta -p 5555:3000 web-node:beta bash复制代码docker ps 查看容器web-node-beta 此时可用postman来跑下接口 ps:数据库里你得预先建张表u_users(sequelize建模时会自动找这张表,没有使用sync来强制建表) 哇!很激动有木有。前后端现在都能访问了,那前端接口跨域怎么办?没事,还记得web-front-1容器吗,对,没错,只要修改容器里nginx里的配置即可。来,我们操作下: docker exec -it f6d33f03653f bash 进入web-front-1容器,然后我们发现conf配置文件目录为:/etc/nginx/conf.d/default.conf,那我们直接编辑配置即可 保存退出,此时我们需要重启下nginx。可以nginx -s reload 或者 nginx -s stop然后 /usr/sbin/nginx 即可。然后我们可以模拟下前端输入内容,调接口,存数据库这么一个流程。 前端输入内容 调接口 请求成功 数据库发现有这数据了 好了,十分感谢各位大佬的观看。docker我学了10天,写了这篇入门文章,有很多指令没写,也省略了部分步骤,有些东西肯定需要自己摸索,当然文章错误难免,还望各大佬指出~欢迎留言,我继续去当我的切图仔了! |
CopyRight 2018-2019 实验室设备网 版权所有 |